<!-- 失物招领 -->
<template>
  <div class="serarchNotice">
    <myheader title="添加物品" rightBtn="主页" @updataInfo="submitRecruit"></myheader>
    <el-upload
      ref="upload"
      class="upload-demo"
      drag
      list-type="picture"
      action="#"
      :on-change="beforeAvatarUpload"
      @abort="cancel"
      :auto-upload="false"
    >
      <i class="el-icon-upload" />
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过5M</div>
      <div class="el-upload__tip" slot="tip">必须要上传一张图片才能提交哟</div>
    </el-upload>

    <van-form class="lostInfo">
      <van-cell-group inset>
        <van-field v-model="serarchNotice.title" name="title" label="商品名称" placeholder="请输入商品名称" />
        <van-field
          v-model="serarchNotice.content"
          name="content"
          label="描述"
          placeholder="请输入商品的描述"
        />
        <van-field
          v-model="serarchNotice.price"
          name="price"
          label="现价"
          type="number"
          placeholder="请输入商品的价格"
        />
        <van-field
          v-model="serarchNotice.originalPrice"
          name="originalPrice"
          label="原价价格"
          type="number"
          placeholder="请输入商品的价格"
        />
        <van-field
          v-model="serarchNotice.amount"
          name="amount"
          label="库存"
          type="number"
          placeholder="请输入商品的库存"
        />
        <van-field v-model="serarchNotice.tag" name="tag" label="标签" placeholder="请输入商品的标签" />
      </van-cell-group>

      <el-button style="margin: 3vh 5vw;" size="small" type="primary" @click="upload">提交</el-button>
    </van-form>
  </div>
</template>

<script>
import { Notify } from 'vant'
import myheader from '../../../comon/myheader.vue'
import formatDateTime from '../../../utils/data'
export default {
  components: {
    myheader,
  },
  data() {
    return {
      serarchNotice: {
        title: '',
        content: '',
        price: '',
        amount: '',
        originalPrice: '',
        tag: '',
        userId: this.$store.getters.getUserInfo.id.toString(),
      },
      show: false,
      times: '',
      flag: false,
      fileList: [],
    }
  },
  methods: {
    // 日期选择
    onConfirm(value) {
      this.show = false
      this.serarchNotice.lostTime = Date.parse(value)
      this.times = formatDateTime.formatDateTime5(this.serarchNotice.lostTime)
    },

    // 上传文件前预校验
    beforeAvatarUpload(file) {
      const FileExt = file.name.replace(/.+\./, '')
      const isJPG = !(['jpg', 'png'].indexOf(FileExt.toLowerCase()) === -1)
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!isJPG) {
        Notify({
          type: 'danger',
          message: '上传头像图片只能是 JPG / png 格式!',
        })
      } else if (!isLt2M) {
        Notify({ type: 'danger', message: '上传头像图片大小不能超过 5M!' })
      } else {
        this.flag = true
      }
      return isJPG && isLt2M
    },
    // 	取消上传
    cancel() {
      this.flag = false
    },
    upload() {
      if (this.serarchNotice.title == '') {
        Notify({ type: 'warning', message: '请填写物品名称' })
        return
      } else if (this.serarchNotice.content == '') {
        Notify({ type: 'warning', message: '请输入商品的描述' })
        return
      } else if (this.price == '') {
        Notify({ type: 'warning', message: '请输入现价' })
        return
      } else if (!this.flag) {
        Notify({ type: 'warning', message: '请选择上传实物图片' })
        return
      } else {
        let formData = new FormData()

        for (
          let index = 0;
          index < this.$refs.upload.uploadFiles.length;
          index++
        ) {
          formData.append('imgFiles', this.$refs.upload.uploadFiles[index].raw)
        }

        formData.append(
          'goods',
          new Blob([JSON.stringify(this.serarchNotice)], {
            type: 'application/json',
          })
        )

        this.$axios
          .post('/goods/save', formData, {
            headers: { 'Content-Type': 'multipart/form-data' },
          })
          .then((res) => {
            if (res.data.code == 200) {
              Notify({ type: 'success', message: '提交成功！' })
              this.$router.push('/yield')
            }
          })
          .catch(() => {})
      }
    },
    submitRecruit() {
      this.$router.push('/home')
    },
  },
}
</script>
 
 <style   scoped>
.serarchNotice {
  margin-top: 46px;
}
.lostInfo {
  width: 90vw;
  margin-left: 5vw;
}
</style>